<template>

  <el-dialog
    title="添加http接口"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
  >
    <div class="el_dialog">

      <el-card shadow="nerver" >

        <el-form :inline="true">
          <el-form-item label="接口名称">
            <el-input size="mini" v-model="nameInput"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="apiSelect()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="addStepClick()"
            >添加
            </el-button
            >
          </el-form-item>
        </el-form>
        <el-scrollbar style="height: 500px" wrap-style="overflow-x: hidden;">
        <div style="margin-right: 20px">
          <!-- <el-button size="mini" type="primary" @click="openTc" style="margin-bottom :20px">新增接口</el-button> -->
          <el-table
            :data="newApiList.data.list"
            border
            @selection-change="handleSelectionChange"
            size="mini"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="接口名称"
              width="300"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="method"
              label="请求方式"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="path"
              label="接口路径"
              width="300"
              align="center"
            ></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev,pager,next,jumper"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="newApiList.data.pageSize"
            :current-page="newApiList.data.pageNamber"
            :total="newApiList.data.total"
            style="float: right; margin-top: 10px; margin-bottom: 10px"
          >
          </el-pagination>
        </div>
        </el-scrollbar>

      </el-card>

    </div>
  </el-dialog>

</template>
<script>
  import Vue from "vue";

  export default {
    props: {
      dialogFormVisible: {
        type: Boolean,
      },
    },
    data() {
      return {
        nameInput: "",
        testCaseId: 0,
        apiSelectionList: [],
        newApiList: {
          data: {
            list: [],
          },
        },
      };
    },
    created() {
      let id = this.$route.query.id;
      this.testCaseId = id;
      console.log("test", id);
      this.getApiPage({
        pageNum: 1,
        pageSize: 10,
        projectId: this.$store.getters.getProjectId,
      });
    },
    methods: {
      apiSelect() {
        var p = {
          pageNum: 1,
          pageSize: this.newApiList.data.pageSize,
          projectId: this.$store.getters.getProjectId
        }
        if (this.nameInput != null && this.nameInput != "") {
          p["apiName"] = this.nameInput
        }
        this.getApiPage(p);
      },
      handleSelectionChange(value) {
        this.apiSelectionList = value;
        // console.log(value);
      },
      addStepClick() {
        this.apiSelectionList.forEach((item, index) => {
          Vue.set(item, "testCaseId", parseInt(this.testCaseId));
          Vue.set(item, "apiId", parseInt(item.id));
        });
        console.log(this.apiSelectionList);
        this.$testCaseStep
          .sAddToCase(this.apiSelectionList)
          .then((res) => {
            // console.log(res);

            this.$emit("changeAddStepPage");
          })
          .catch((err) => {
            console.log(err);
          });
      },
      handleClose(done) {
        this.$emit("changeAddStepPage");
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        var p = {
          pageNum: 1,
          pageSize: val,
          projectId: this.$store.getters.getProjectId
        }
        if (this.nameInput != null && this.nameInput != "") {
          p["apiName"] = this.nameInput
        }
        this.getApiPage(p);
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        var p = {
          pageNum: val,
          pageSize: this.newApiList.data.pageSize,
          projectId: this.$store.getters.getProjectId
        }
        if (this.nameInput != null && this.nameInput != "") {
          p["apiName"] = this.nameInput
        }
        this.getApiPage(p);
      },
      getApiPage(p) {
        this.$api
          .apiPage(p)
          .then((res) => {
            if (res.code == 200) {
              this.newApiList = res;
              // console.log(res);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
</script>

